<template>
  <div class="app-container">
    <div class="title">
      <span class="title-name">项目展示</span>
      <div class="tag-button">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
      <div class="title-icon">
        <i class="iconfont iconhelp" @click="preview"></i>
      </div>
    </div>
    <el-form ref="form" :model="form" :rules="rules">
      <table border="1" style="border-spacing:0;border;width:100%;">
        <thead>
          <th style="min-width: 120px">分类</th>
          <th style="min-width: 150px">字段名称</th>
          <th>内容</th>
        </thead>
        <tbody>
          <tr>
            <td rowspan="5">基础信息</td>
            <td>项目代码</td>
            <td>
              <el-form-item prop="projectCode">
                <el-input v-model="form.projectCode" :disabled="true" />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>项目名称</td>
            <td>
              <el-form-item prop="projectName">
                <el-input
                  type="textarea"
                  v-model="form.projectName"
                  :disabled="true"
                  autosize
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>是否保密工程</td>
            <td>
              <el-form-item>
                <el-radio-group v-model="form.isSecurity">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>所在地区</td>
            <td>
              <el-form-item prop="area">
                <el-cascader
                  v-model="form.area"
                  :options="areaOptions"
                  filterable
                  :props="{ value: 'id', checkStrictly: true }"
                  style="width: 100%"
                  @change="getLastNodes"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>经纬度</td>
            <td>
              <el-form-item label="经度" prop="longitude">
                <el-input v-model="form.longitude" placeholder="经度" />
              </el-form-item>
              <el-form-item label="纬度" prop="latitude">
                <el-input v-model="form.latitude" placeholder="纬度" />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td rowspan="4">项目概要</td>
            <td>展示项目名称</td>
            <td>
              <el-form-item prop="showProjectName">
                <el-input
                  v-model="form.showProjectName"
                  type="textarea"
                  autosize
                  placeholder="请输入展示项目名称"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>项目概要</td>
            <td>
              <el-form-item prop="projectSummary">
                <el-input
                  v-model="form.projectSummary"
                  type="textarea"
                  autosize
                  placeholder="请输入项目概要"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>项目展示主图</td>
            <td>
              <el-form-item prop="projectShowMainImage">
                <div class="input-content" style="display: flex">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :limit="1"
                  >
                    <i class="el-icon-upload" />
                    <div class="el-upload__text">
                      将图片拖到此处，或
                      <em>点击上传</em>(建议传16:9比例图片)
                    </div>
                  </el-upload>
                  <el-carousel
                    :autoplay="false"
                    type="card"
                    :loop="false"
                    arrow="always"
                    style="width: 800px"
                  >
                    <el-carousel-item
                      v-for="(item, index) in showMainImageAtts.bmsAttachments"
                      :key="index"
                    >
                      <h3 class="medium">
                        <i
                          class="el-icon-circle-close"
                          style="position: absolute; right: 0; z-index: 10"
                          @click="delimg(index)"
                        />
                        <el-image
                          :src="item.storagePath"
                          style="height: 225px"
                        />
                        <div
                          style="text-align: center; background-color: white"
                        >
                          {{ item.fileName }}
                        </div>
                      </h3>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>项目展示图片</td>
            <td>
              <el-form-item prop="projectShowImage">
                <div class="input-content" style="display: flex">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="#"
                    :show-file-list="false"
                    :before-upload="showImageBeforeUpload"
                    :limit="1"
                  >
                    <i class="el-icon-upload" />
                    <div class="el-upload__text">
                      将图片拖到此处，或
                      <em>点击上传</em>(建议传16:9比例图片)
                    </div>
                  </el-upload>
                  <el-carousel
                    :autoplay="false"
                    type="card"
                    :loop="false"
                    arrow="always"
                    style="width: 800px"
                  >
                    <el-carousel-item
                      v-for="(item, index) in showImageAtts.bmsAttachments"
                      :key="index"
                    >
                      <h3 class="medium">
                        <i
                          class="el-icon-circle-close"
                          style="position: absolute; right: 0; z-index: 10"
                          @click="showImageDelimg(index)"
                        />
                        <el-image
                          :src="item.storagePath"
                          style="height: 225px"
                        />
                        <div
                          style="text-align: center; background-color: white"
                        >
                          {{ item.fileName }}
                        </div>
                      </h3>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td rowspan="3">项目背景</td>
            <td>委托方</td>
            <td>
              <el-form-item prop="client">
                <el-input v-model="form.client" placeholder="请输入委托方" />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>投资类型</td>
            <td>
              <el-form-item>
                <el-checkbox-group v-model="form.investmentType" @change="investmentTypeChange">
                  <el-checkbox label="政府投资" name="type"></el-checkbox>
                  <el-checkbox label="企业投资" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>项目建设背景</td>
            <td>
              <el-form-item prop="projectBuildBackground">
                <el-input
                  v-model="form.projectBuildBackground"
                  type="textarea"
                  autosize
                  placeholder="请输入项目建设背景"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td rowspan="7">项目内容</td>
            <td>项目总投资(万元)</td>
            <td>
              <el-form-item prop="projectTotal">
                <el-input v-model="form.projectTotal" type="number" />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>工程类型</td>
            <td>
              <el-form-item>
                <el-checkbox-group v-model="form.projectType" @change="projectTypeChange">
                  <el-checkbox label="片区综合开发" name="type"></el-checkbox>
                  <el-checkbox label="房建" name="type"></el-checkbox>
                  <el-checkbox label="市政" name="type"></el-checkbox>
                  <el-checkbox label="公路" name="type"></el-checkbox>
                  <el-checkbox label="电力" name="type"></el-checkbox>
                  <el-checkbox label="水利水运" name="type"></el-checkbox>
                  <el-checkbox label="设备" name="type"></el-checkbox>
                  <el-checkbox label="铁路" name="type"></el-checkbox>
                  <el-checkbox label="生态环境" name="type"></el-checkbox>
                  <el-checkbox label="信息化" name="type"></el-checkbox>
                  <el-checkbox label="其它" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>建设选址</td>
            <td>
              <el-form-item prop="projectSiteSelection">
                <el-input v-model="form.projectSiteSelection" />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>建设规模描述</td>
            <td>
              <el-form-item prop="projectScale">
                <el-input
                  v-model="form.projectScale"
                  type="textarea"
                  autosize
                  placeholder="请输入建设规模描述"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>开始服务日期</td>
            <td>
              <el-form-item prop="startDate">
                <el-date-picker
                  v-model="form.startDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptionsStart"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>完成服务日期</td>
            <td>
              <el-form-item prop="endDate">
                <el-date-picker
                  v-model="form.endDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptionsEnd"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>主要服务内容</td>
            <td>
              <el-form-item prop="mainServiceContent">
                <el-input
                  v-model="form.mainServiceContent"
                  placeholder="请输入主要服务内容"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td rowspan="3">项目特点</td>
            <td>亮点与难点</td>
            <td>
              <el-form-item prop="advanDefect">
                <el-input
                  v-model="form.advanDefect"
                  type="textarea"
                  autosize
                  placeholder="请输入亮点与难点"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>服务成效与创新点</td>
            <td>
              <el-form-item prop="innovationPoint">
                <el-input
                  v-model="form.innovationPoint"
                  type="textarea"
                  autosize
                  placeholder="请输入服务成效与创新点"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>项目所获荣誉</td>
            <td>
              <el-form-item prop="projectHonor">
                <el-input
                  v-model="form.projectHonor"
                  type="textarea"
                  autosize
                  placeholder="请输入项目所获荣誉"
                />
              </el-form-item>
            </td>
          </tr>

          <tr>
            <td rowspan="3">项目故事</td>
            <td>团队主要成员</td>
            <td>
              <el-form-item prop="mainMember">
                <el-input
                  v-model="form.mainMember"
                  placeholder="请输入团队主要成员"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>感想、心得与故事</td>
            <td>
              <el-form-item prop="story">
                <el-input
                  v-model="form.story"
                  type="textarea"
                  autosize
                  placeholder="请输入感想、心得与故事"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>故事图片</td>
            <td>
              <el-form-item prop="storyImage">
                <div class="input-content" style="display: flex">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="#"
                    :show-file-list="false"
                    :before-upload="storyBeforeUpload"
                    :limit="1"
                  >
                    <i class="el-icon-upload" />
                    <div class="el-upload__text">
                      将图片拖到此处，或
                      <em>点击上传</em>(建议传16:9比例图片)
                    </div>
                  </el-upload>
                  <el-carousel
                    :autoplay="false"
                    type="card"
                    :loop="false"
                    arrow="always"
                    style="width: 800px"
                  >
                    <el-carousel-item
                      v-for="(item, index) in storyImages.bmsAttachments"
                      :key="index"
                    >
                      <h3 class="medium">
                        <i
                          class="el-icon-circle-close"
                          style="position: absolute; right: 0; z-index: 10"
                          @click="storyDelimg(index)"
                        />
                        <el-image
                          :src="item.storagePath"
                          style="height: 225px"
                        />
                        <div
                          style="text-align: center; background-color: white"
                        >
                          {{ item.fileName }}
                        </div>
                      </h3>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </el-form-item>
            </td>
          </tr>

          <tr>
            <td colspan="2">附件上传</td>
            <td>
              <el-form-item prop="projectAttachment">
                <vue-uploader
                  :single-type="false"
                  :file-list="projectAttachmentPar.bmsAttachments"
                  @changeFileData="changeFile"
                  @removeFileList="removeFileList"
                  :pathName="pathName"
                />
              </el-form-item>
            </td>
          </tr>
        </tbody>
      </table>
    </el-form>

    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe
        :src="manualPreviewUrl"
        frameborder="0"
        width="100%"
        height="700px"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProjectLibrary,
  getProjectLibrary,
  delProjectLibrary,
  addProjectLibrary,
  updateProjectLibrary,
  exportProjectLibrary,
  getInfoByProjectId,
} from "@/api/projectWorkbench/projectList/projectLibrary";
import {
  listGeneral,
  uploadImages,
} from "@/api/projectWorkbench/projectList/projectGeneral";
import aTitle from "@/components/Title";
import { provinceCity, provinceCityTree } from "@/api/provinceCity";
import vueUploader from "@/components/Uploader";
export default {
  name: "ProjectLibrary",
  components: { aTitle, vueUploader },
  props: {
    pathName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      openPreview: false,
      isvalid: false,
      projectAttachmentPar: {
        attachmentIds: [],
        bmsAttachments: [],
      },
      showMainImageAtts: {
        bmsAttachments: [],
      },
      showImageAtts: {
        bmsAttachments: [],
      },
      storyImages: {
        bmsAttachments: [],
      },
      manualPreviewUrl: undefined,
      areaOptions: [],
      pickerOptionsStart: {
        disabledDate: (time) => {
          const endDateVal = this.form.endDate;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime();
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          const beginDateVal = this.form.startDate;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          }
        },
      },
      // 表单参数
      form: {
        endDate: undefined,
        startDate: undefined,
        projectShowMainImages: [],
        investmentType: [],
        projectType: [],
        isSecurity: undefined,
        area:undefined,
        latitude:undefined,
        longitude:undefined,
        showProjectName:undefined,
        projectSummary:undefined,
        client:undefined,
        projectBuildBackground:undefined,
        projectTotal:undefined,
        projectSiteSelection:undefined,
        projectScale:undefined,
        mainServiceContent:undefined,
        advanDefect:undefined,
        innovationPoint:undefined,
        mainMember:undefined,
        projectHonor:undefined
      },
      projectTypes:undefined,
      investmentTypes:undefined,
      // 表单校验
      rules: {
      },
      project: {},
    };
  },
  created() {
    this.getAreas();
    this.getProjectLibraryInfo();
    //this.isvalid = sessionStorage.getItem("isvalid") === "1" ? true : false;
  },
  methods: {
    getAreas() {
      //省市区加载
      provinceCityTree().then((res) => {
        if (res.code === 200) {
          this.areaOptions = res.data;
        }
      });
    },
    getInfoByProjectId() {
      getInfoByProjectId(this.$route.params.id).then((res) => {
        if (res.code == 200) {
          debugger
          if (!res.data || (res.data && !res.data.guid)) {
            this.form.showProjectName = this.project.projectName;
            if (this.project.area && this.project.area.length > 0) {
              this.form.area = this.project.area.split(";").filter(str=>{return !!str});
            }

            this.form.client = this.project.party;
            this.form.projectTotal = this.project.investment;
            this.form.projectScale = this.project.content;
            this.form.projectHonor = this.project.honors;
            this.form.startDate = this.project.startDate;
            this.form.endDate = this.project.endDate;
            this.form.projectId = this.project.guid;
          } else {
            if (res.data.area) {
              res.data.area = res.data.area.split(",");
            }
            this.form = res.data;
            if (!res.data.investmentType) {
              this.form.investmentType = [];
            }else{
              this.form.investmentType = res.data.investmentType.split(",");
            }

            if (!res.data.projectType) {
              this.form.projectType = [];
            }else{
              this.form.projectType = res.data.projectType.split(",");
            }

            if (res.data.bmsAttachments) {
              this.projectAttachmentPar.bmsAttachments =
                res.data.bmsAttachments;
              this.projectAttachmentPar.attachmentIds = res.data.attachmentIds;
            }

            if (res.data.projectShowMainImages) {
              this.showMainImageAtts.bmsAttachments =
                res.data.projectShowMainImages;
            }

            if (res.data.projectShowImages) {
              this.showImageAtts.bmsAttachments = res.data.projectShowImages;
            }

            if (res.data.storyImages) {
              this.storyImages.bmsAttachments = res.data.storyImages;
            }
          }
          this.form.projectCode = this.project.projectCode;
          this.form.projectName = this.project.projectName;
        }
      });
    },
    getProjectLibraryInfo() {
      var $this = this;

      listGeneral(this.$route.params.id).then((res) => {
        if (res.code === 200) {
          this.project.projectCode = res.data.code;
          this.project.projectName = res.data.name;
          this.project.area = res.data.area;
          this.project.party = res.data.party;
          this.project.investment = res.data.investment;
          this.project.content = res.data.content;
          this.project.honors = res.data.honors;
          this.project.guid = res.data.guid;
          this.project.startDate = res.data.startDate;
          this.project.endDate = res.data.endDate;
          this.getInfoByProjectId();
        }
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      
      if(!this.form.isSecurity){
        this.msgError("请选择是否保密工程");
        return;
      }

      if(!this.form.area){
        this.msgError("请选择所在地区");
        return;
      }

      if(!this.form.showProjectName){
        this.msgError("请输入展示项目名称");
        return;
      }

      if(!this.form.projectSummary){
        this.msgError("请输入项目概要");
        return;
      }

      if(this.showMainImageAtts.bmsAttachments.length===0){
        this.msgError("请上传项目展示主图");
        return;
      }

      if(!this.form.client){
        this.msgError("请输入委托方");
        return;
      }

      if(!this.investmentTypes && this.form.investmentType.length===0){
        this.msgError("请至少选择一个投资类型");
        return;
      }

      if(!this.form.projectBuildBackground){
        this.msgError("请输入项目建设背景");
        return;
      }

      if(!this.form.projectTotal){
        this.msgError("请输入项目总投资");
        return;
      }

      if(!this.projectTypes && this.form.projectType.length===0){
        this.msgError("请至少选择一个工程类型");
        return;
      }

      if(!this.form.projectSiteSelection){
        this.msgError("请输入建设选址");
        return;
      }

      if(!this.form.projectScale){
        this.msgError("请输入建设规模描述");
        return;
      }

      if(!this.form.startDate){
        this.msgError("请选择开始服务日期");
        return;
      }

      if(!this.form.mainServiceContent){
        this.msgError("请输入主要服务内容");
        return;
      }

      if(!this.form.advanDefect){
        this.msgError("请输入亮点与难点");
        return;
      }

      if(!this.form.innovationPoint){
        this.msgError("请输入服务成效与创新点");
        return;
      }

      if(!this.form.mainMember){
        this.msgError("请输入团队主要成员");
        return;
      }
      /*
      isSecurity: [
            { required: true, message: '请选择是否保密工程', trigger: 'change' }
          ],
        area: [
           { required: true, message: '请选择所在地区', trigger: 'change' }
        ],
        showProjectName:[
           { required: true, message: '请输入展示项目名称', trigger: 'blur' }
        ],
        projectSummary:[
           { required: true, message: '请输入项目概要', trigger: 'blur' }
        ],
        client:[
           { required: true, message: '请输入委托方', trigger: 'blur' }
        ],
        investmentType:[
           { type: 'array', required: true, message: '请至少选择一个投资类型', trigger: 'change' }
        ],
        projectBuildBackground:[
          { required: true, message: '请输入项目建设背景', trigger: 'blur' }
        ],
        projectTotal:[
          { required: true, message: '请输入项目总投资', trigger: 'blur' }
        ],
        projectType:[
           { type: 'array', required: true, message: '请至少选择一个工程类型', trigger: 'change' }
        ],
        projectSiteSelection:[
          { required: true, message: '请输入建设选址', trigger: 'blur' }
        ],
        projectScale:[
          { required: true, message: '请输入建设规模描述', trigger: 'blur' }
        ],
        startDate:[
           { type: 'date', required: true, message: '请选择开始服务日期', trigger: 'change' }
        ],
        mainServiceContent:[
          { required: true, message: '请输入主要服务内容', trigger: 'blur' }
        ],
        advanDefect:[
          { required: true, message: '请输入亮点与难点', trigger: 'blur' }
        ],
        innovationPoint:[
          { required: true, message: '请输入服务成效与创新点', trigger: 'blur' }
        ],
        mainMember:[
          { required: true, message: '请输入团队主要成员', trigger: 'blur' }
        ]
      */


      this.$refs["form"].validate((valid) => {
        if (valid) {
          const reqParam = this.form;
          if (reqParam.area && reqParam.area.length > 0) {
            reqParam.area = reqParam.area.join(",");
          }
          reqParam.attachmentIds = this.projectAttachmentPar.attachmentIds;
          reqParam.projectShowMainImages = this.showMainImageAtts.bmsAttachments;
          reqParam.projectShowImages = this.showImageAtts.bmsAttachments;
          reqParam.storyImages = this.storyImages.bmsAttachments;
          reqParam.projectType = this.projectTypes;
          reqParam.investmentType = this.investmentTypes;
          
          debugger;
          if (this.form.guid != undefined) {
            updateProjectLibrary(reqParam).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getProjectLibraryInfo();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addProjectLibrary(reqParam).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getProjectLibraryInfo();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    preview() {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}项目主页/业务系统操作说明-项目主页-业务管理.xlsx`
      )}&name=${encodeURIComponent("业务系统操作说明-项目主页-业务管理.xlsx")}`;
    },
    getLastNodes(val) {
      if (val[0] && !val[1] && !val[2]) {
        this.form.area = val[0];
      }
      if (val[0] && val[1] && !val[2]) {
        this.form.area = val[0] + "," + val[1];
      }
      if (val[0] && val[1] && val[2]) {
        this.form.area = val[0] + "," + val[1] + "," + val[2];
      }
    },
    beforeUpload(file) {
      if (
        this.showMainImageAtts.bmsAttachments &&
        this.showMainImageAtts.bmsAttachments.length == 1
      ) {
        this.msgError("只能上传一张项目展示主图");
        return;
      }
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        if (file.size > 20971520) {
          this.msgError("图片过大,不能超过20MB。");
        } else if (
          file.name.includes("&") ||
          file.name.includes("%") ||
          file.name.includes("^") ||
          file.name.includes("#") ||
          file.name.includes("*") ||
          file.name.includes("`")
        ) {
          this.msgError("图片名字包含特殊字符，不能上传");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            const formData = new FormData();
            console.log(file);
            formData.append("images", file);
            formData.append(
              "path",
              `TJECdocuments/${this.$route.params.id}/项目展示`
            );
            uploadImages(formData).then((response) => {
              if (response.code === 200) {
                this.showMainImageAtts.bmsAttachments.push({
                  guid: response.data[0].fileId,
                  storagePath: response.data[0].fileUrl,
                  fileName: response.data[0].fileName,
                });
              } else {
                this.msgError(response.msg);
              }
            });
          };
        }
      }
    },
    showImageBeforeUpload(file) {
      if (
        this.showImageAtts.bmsAttachments &&
        this.showImageAtts.bmsAttachments.length > 5
      ) {
        this.msgError("最多只能上传5张项目展示图片");
        return;
      }
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        if (file.size > 20971520) {
          this.msgError("图片过大,不能超过20MB。");
        } else if (
          file.name.includes("&") ||
          file.name.includes("%") ||
          file.name.includes("^") ||
          file.name.includes("#") ||
          file.name.includes("*") ||
          file.name.includes("`")
        ) {
          this.msgError("图片名字包含特殊字符，不能上传");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            const formData = new FormData();
            console.log(file);
            formData.append("images", file);
            formData.append(
              "path",
              `TJECdocuments/${this.$route.params.id}/项目展示`
            );
            uploadImages(formData).then((response) => {
              if (response.code === 200) {
                this.showImageAtts.bmsAttachments.push({
                  guid: response.data[0].fileId,
                  storagePath: response.data[0].fileUrl,
                  fileName: response.data[0].fileName,
                });
              } else {
                this.msgError(response.msg);
              }
            });
          };
        }
      }
    },
    storyBeforeUpload(file) {
      if (
        this.storyImages.bmsAttachments &&
        this.storyImages.bmsAttachments.length == 1
      ) {
        this.msgError("最多只能上传5张故事图片");
        return;
      }
      if (file.type.indexOf("image/") == -1) {
        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        if (file.size > 20971520) {
          this.msgError("图片过大,不能超过20MB。");
        } else if (
          file.name.includes("&") ||
          file.name.includes("%") ||
          file.name.includes("^") ||
          file.name.includes("#") ||
          file.name.includes("*") ||
          file.name.includes("`")
        ) {
          this.msgError("图片名字包含特殊字符，不能上传");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            const formData = new FormData();
            console.log(file);
            formData.append("images", file);
            formData.append(
              "path",
              `TJECdocuments/${this.$route.params.id}/项目展示`
            );
            uploadImages(formData).then((response) => {
              if (response.code === 200) {
                this.storyImages.bmsAttachments.push({
                  guid: response.data[0].fileId,
                  storagePath: response.data[0].fileUrl,
                  fileName: response.data[0].fileName,
                });
              } else {
                this.msgError(response.msg);
              }
            });
          };
        }
      }
    },
    delimg(index) {
      this.showMainImageAtts.bmsAttachments.splice(index, 1);
    },
    showImageDelimg(index) {
      this.showImageAtts.bmsAttachments.splice(index, 1);
    },
    storyDelimg(index) {
      this.storyImages.bmsAttachments.splice(index, 1);
    },
    changeFile(id, name) {
      this.projectAttachmentPar.attachmentIds.push(id);
    },
    removeFileList(id) {
      this.projectAttachmentPar.attachmentIds = this.projectAttachmentPar.attachmentIds.filter(
        (item) => item != id
      );
      this.projectAttachmentPar.bmsAttachments = this.projectAttachmentPar.bmsAttachments.filter(
        (item) => item.guid != id
      );
    },
    projectTypeChange(val){
      if(val){
        this.projectTypes = val.join(",");
      }else{
        this.projectTypes = undefined;
      }
    },
    investmentTypeChange(val){
      if(val){
        this.investmentTypes = val.join(",");
      }else{
        this.investmentTypes = undefined;
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.title {
  height: 50px;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #dfe6ec;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  padding: 0 20px;
  .title-name {
    width: 100px;
    font-size: 14px;
  }
  .tag-button {
    flex: 1;
    text-align: right;
  }
  .title-icon {
    cursor: pointer;
    margin-left: 10px;
  }
}

.el-form-item {
  margin-bottom: 0px;
}

.el-input.is-disabled .el-input__inner {
  background-color: #ffffff;
  color: #000000;
}

/deep/ .upload-demo {
  width: 225px;
  height: 225px;
  margin-right: 50px;
  // .el-upload {
  //   width: 100%;
  .el-upload-dragger {
    width: 225px;
    height: 225px;
  }
  // }
}
.uploadicon {
  margin-right: 5px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  // line-height: 225px;
  margin: 0;
}

.el-carousel__item {
  // background-color: #99a9bf
  background-color: #fff;
}
</style>